<template>
  <Card dis-hover :bordered="false">
    <div class="ivu-mb-16">
      <Input
        v-width="360"
        placeholder="请输入专家名称、职称、医院。按Enter进行搜索"
        v-model="params.keyword"
        clearable
        @on-clear="askData"
        @on-enter="askData"
      />
      <Button
        class="ivu-fr"
        type="primary"
        v-hasC="{
          name: 'v1-content-evaluate-create',
          flag: 'v1/content/evaluate/create',
        }"
        @click="handleAdd"
        >新增</Button
      >
    </div>
    <Table
      :columns="columns"
      :data="list"
      :loading="loading"
      :border="true"
      @on-sort-change="sortChange"
    >
      <template #status="{ row }">
        <Badge v-if="row.status == 1" status="success" text="正常" />
        <Badge v-if="row.status == 0" status="error" text="停用" />
        <Badge v-if="row.status == -1" status="warnning" text="删除" />
      </template>
      <template #action="{ row }">
        <a
          @click="handleEdit(row)"
          v-hasC="{
            name: 'v1-content-evaluate-edit',
            flag: 'v1/content/evaluate/edit',
          }"
          >编辑</a
        >
        <Divider
          type="vertical"
          v-hasC="{
            name: 'v1-content-evaluate-edit',
            flag: 'v1/content/evaluate/edit',
          }"
        ></Divider>
        <a
          @click="handleDelete(row)"
          class="delete"
          v-hasC="{
            name: 'v1-content-evaluate-delete',
            flag: 'v1/content/evaluate/delete',
          }"
          >删除</a
        >
      </template>
    </Table>
    <Page
      :total="total"
      class="ivu-mt-16"
      v-model="params.page"
      :current.sync="params.page"
      :page-size="params.pageSize"
      @on-change="formSize"
      show-total
      show-elevator
      show-sizer
      @on-page-size-change="formChangePage"
    />
    <Modal
      :title="add ? '新增' : '编辑'"
      width="960"
      footer-hide
      v-model="modal"
      :mask-closable="false"
      :draggable="true"
    >
      <Form
        :label-width="118"
        :model="formData"
        ref="formItem"
        :rules="infoRules"
      >
        <FormItem label="专家名称" prop="expert_name">
          <Input placeholder="请输入专家名称" v-model="formData.expert_name" />
        </FormItem>
        <FormItem label="职称" prop="title">
          <Input placeholder="请输入专家职称" v-model="formData.title" />
        </FormItem>
        <FormItem label="所属医院" prop="hospital">
          <Input placeholder="请输入所属医院" v-model="formData.hospital" />
        </FormItem>
        <FormItem prop="cover_img" label="视频封面">
          <div class="imageUpdate">            
            <Upload
              ref="upload"
              name="file"
              :show-upload-list="false"
              :before-upload="checkimg"
              :on-success="handleSuccess"
              :format="['jpg', 'jpeg', 'png']"
              accept=".jpg,.jpeg,.png"
              :action="requestAction"
              :on-progress="videoProgress"
            >
              <div>
                <Button
                  type="primary"
                  :loading="wsh.loading"
                  class="ivu-mr-8 ivu-ml-8"
                >
                  {{ wsh.loading ? "上传中..." : "上传" }}
                </Button>
              </div>
            </Upload>
            <Button type="success" @click="wsh.showImgModel = true">选择</Button>            
          </div>
          <img v-if="formData.cover_img" :src="formData.cover_img" alt="" style="width:200px;margin-top:10px;">
        </FormItem>
        <FormItem label="视频ID" prop="video_id">
          <Input placeholder="请输入视频ID" v-model="formData.video_id" />
        </FormItem>
        <FormItem label="排序" prop="sort">
          <InputNumber :min="0" :precision="0" v-model="formData.sort" />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Switch v-model="formData.status" />
        </FormItem>
      </Form>
      <div slot="footer" class="modalFoot">
        <Button @click="canceledit()">取消</Button>
        <Button type="primary" @click="sendData" class="ivu-ml-16">确定</Button>
      </div>
    </Modal>
    <glo-check
      v-model="wsh.showImgModel"
      @getImgArr="getVideoArr"
      :modelType="1"
    />
  </Card>
</template>
<script>
import { expertList, expertDel, expertCreate } from '@/api/jzy.js'
import { updatefileTemp } from '@/api/set.js'
import Setting from '@/setting'
import util from '@/libs/util'
import { Message } from 'view-ui-plus'
export default {
  name: 'modalName',
  data () {
    return {
      wsh: {
        loading: false,//视频上传loading
        showImgModel: false,//是否展示图片选择
      },
      baseUrl: Setting.request.apiBaseURL,
      requestAction: '',
      add: true,
      modal: false,      
      formData: {
        expert_name: '',
        title: '',
        hospital: '',
        cover_img: '',
        video_id:'',
        sort: '',
        status: true
      },
      total: 0,
      infoRules: {
        expert_name: [
          { required: true, message: "请输入专家名称", trigger: "bulr" },
          { trigger: "bulr", validator: this.watermarkContentVaild }
        ],
        title: [{ required: true, message: "请输入职称", trigger: "bulr" }],
        hospital: [{ required: true, message: "所属医院不能为空", trigger: "bulr" }],
        video_id: [{ required: true, message: "视频ID不能为空", trigger: "bulr" }],
        cover_img: [{ required: true, message: "视频封面不能为空", trigger: "bulr" }]
      },
      loading: false,
      columns: [
        {
          title: "专家名称",
          key: 'expert_name',
          minWidth: 158,
          tooltip: true
        },
        {
          title: "职称",
          key: 'title',
          minWidth: 158,
          tooltip: true
        },
        {
          title: "医院",
          key: 'hospital',
          minWidth: 158,
          tooltip: true
        },
        {
          title: "视频ID",
          key: 'video_id',
          minWidth: 158,
          tooltip: true
        },
        {
          title: '排序',
          key: 'sort',
          width: 80,
          sortable: 'custom'
        },
        {
          title: "状态",
          slot: 'status',
          width: 90
        },
        {
          title: "创建时间",
          key: 'created_at',
          width: 158,
          sortable: 'custom'
        },
        {
          title: "操作",
          slot: 'action',
          fixed: "right",
          width: 118
        }
      ],
      current: 1,
      params: {
        page: 1,
        pageSize: 10,
        keyword: '',
        sort_column: '',
        sort_value: ''
      },
      list: []
    }
  },
  methods: {
    watermarkContentVaild (rule, value, callback) {
      let length = value.replace(/[^\x00-\xff]/g, '01').length
      if (length > 10) {
        callback(new Error("请输入1~5个汉字"))
      } else {
        callback()
      }
    },
    checkimg (e) {
      this.wsh.loading = true
       for (let item of this.$refs.formItem.fields) {    
        if (item.prop=='cover_img') {
          item.resetField()
        }
      }
    },
    handleSuccess (response, file, fileList) {
      this.formData.cover_img = `${response.data.host}${response.data.image_url}`
      this.wsh.loading = false
      const id = response.data.image_id[0]
      updatefileTemp({ id })
      Message.success('上传成功')
    },
    getVideoArr (arr) {
      for (let item of this.$refs.formItem.fields) {    
        if (item.prop=='cover_img') {
          item.resetField()
        }
      }
      this.formData.cover_img = arr[0]
      Message.success('操作成功')
    },
    askData () {
      this.params.page=1
      this.getData()
    },
    getData () {
      this.loading = true
      expertList(this.params).then(res => {
        this.list = res.list
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
    formSize (e) {
      this.params.page = e
      this.current = e
      this.getData()
    },
    formChangePage (e) {
      this.params.pageSize = e
      this.getData()
    },
    sortChange (e) {
      this.params.sort_column = e.key
      this.params.sort_value = e.order
      this.getData()
    },
    handleAdd () {
      this.$refs.formItem.resetFields()
      this.add = true
      this.modal = true
      this.formData = {
        expert_name: '',
        title: '',
        hospital: '',
        cover_img: '',
        video_id:'',
        sort: '',
        status: true
      }
    },
    handleEdit (e) {
      this.$refs.formItem.resetFields()
      this.add = false
      this.modal = true
      this.formData = {
        id: e.id,
        expert_name: e.expert_name,
        title: e.title,
        hospital: e.hospital,
        cover_img: e.cover_img,
        video_id:e.video_id,
        sort: +e.sort,
        status: e.status == 1 ? true : false
      }
    },
    handleDelete (e) {
      this.$Modal.confirm({
        title: '温馨提示',
        content: '确定删除此项?',
        onOk: () => {
          expertDel({ id: e.id }).then(res => {
            this.getData()
          })
        }
      })
    },
    canceledit () {
      this.modal = false
    },
    sendData () {
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.formData.status = this.formData.status ? 1 : 0
          expertCreate(this.formData).then(res => {
            this.getData()
            this.modal = false
          })
        }
      })
    }
  },
  mounted () {
    this.requestAction = this.baseUrl + `/v1/upload/images?auth_access_token=${util.cookies.get('token')}&auth_project_id=${localStorage.getItem('currentProject')}`
    this.getData()
  },
};
</script>
<style lang='less' scoped>
.imageUpdate {
  display: flex;
  line-height: 1;
}

.delete {
  color: rgb(226, 5, 5);
}
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
}
</style> 